<template>
  <el-form
    :model="form"
    ref="queryRef"
    :inline="isForm"
    :rules="rules"
    label-width="100px"
    class="log-search"
  >
    <div v-if="isForm" class="mes-title" style="margin-bottom: 5px">
      {{ form.prodDate }}
      <el-link @click="openHistory" style="margin-left: 10px" type="primary">查看历史日志</el-link>
    </div>
    <div v-if="!isForm" class="mes-title" style="margin-bottom: 5px">
      {{ form.workTime }}
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="工厂" prop="factory">
          <el-select
            v-if="isForm"
            v-model="form.factory"
            style="width: 100%"
            clearable
            filterable
            @change="factoryChange"
          >
            <el-option
              v-for="(item, index) in deptTree.factoryList"
              :key="index"
              :label="item.factoryName"
              :value="item.factoryCode"
            ></el-option>
          </el-select>
          <div v-else class="form-text">{{ form.factoryName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="工段" prop="workshopCode">
          <el-select
            v-if="isForm"
            v-model="form.workshopCode"
            style="width: 100%"
            clearable
            filterable
            @change="workshopChange"
          >
            <el-option
              v-for="(item, index) in deptTree.workshopList"
              :key="index"
              :label="item.workshopName"
              :value="item.workshopCode"
            ></el-option>
          </el-select>
          <div v-else class="form-text">{{ form.workshopName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="产线" prop="lineCode">
          <el-select
            v-if="isForm"
            v-model="form.lineCode"
            style="width: 100%"
            clearable
            filterable
            @change="lineChange"
          >
            <el-option
              v-for="(item, index) in deptTree.lineList"
              :key="index"
              :label="item.lineName"
              :value="item.lineCode"
            ></el-option>
          </el-select>
          <div v-else class="form-text">{{ form.lineName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="工艺段" prop="sectionCode">
          <el-select
            v-if="isForm"
            v-model="form.sectionCode"
            style="width: 100%"
            clearable
            filterable
            @change="sectionChange"
          >
            <el-option
              v-for="(item, index) in deptTree.sectionList"
              :key="index"
              :label="item.sectionName"
              :value="item.sectionCode"
            ></el-option>
          </el-select>
          <div v-else class="form-text">{{ form.sectionName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="岗位" prop="stationCode">
          <el-select
            v-if="isForm"
            v-model="form.stationCode"
            style="width: 100%"
            clearable
            filterable
            @change="stationChange"
          >
            <el-option
              v-for="(item, index) in deptTree.stationList"
              :key="index"
              :label="item.stationName"
              :value="item.stationCode"
            ></el-option>
          </el-select>
          <div v-else class="form-text">{{ form.stationName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="班次" prop="classesName">
          <div class="form-text">{{ form.classesName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="班组" prop="workGroupName">
          <div class="form-text">{{ form.workGroupName }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="填写人" prop="filledByName">
          <div class="form-text">{{ form.filledByName || userStore.name }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="工艺参数调整" prop="technologyAdjust">
          <el-input
            v-if="isForm"
            v-model="form.technologyAdjust"
            type="textarea"
            style="width: 100%"
            :maxlength="1000"
            show-word-limit
            placeholder="请输入工艺参数调整"
          ></el-input>
          <div v-else class="form-text">{{ form.technologyAdjust }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="设备运行情况" prop="equipmentStatus">
          <el-input
            v-if="isForm"
            v-model="form.equipmentStatus"
            type="textarea"
            style="width: 100%"
            :maxlength="1000"
            show-word-limit
            placeholder="请输入运行情况"
          ></el-input>
          <div v-else class="form-text">{{ form.equipmentStatus }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="卫生清洁工作" prop="hygieneClean">
          <el-input
            v-if="isForm"
            v-model="form.hygieneClean"
            type="textarea"
            :maxlength="1000"
            style="width: 100%"
            show-word-limit
            placeholder="请输入卫生清洁工作"
          ></el-input>
          <div v-else class="form-text">{{ form.hygieneClean }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="安全" prop="secure">
          <el-input
            v-if="isForm"
            v-model="form.secure"
            type="textarea"
            style="width: 100%"
            :maxlength="1000"
            show-word-limit
            placeholder="请输入安全"
          ></el-input>
          <div v-else class="form-text">{{ form.secure }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="质量" prop="quality">
          <el-input
            v-if="isForm"
            v-model="form.quality"
            style="width: 100%"
            type="textarea"
            :maxlength="1000"
            show-word-limit
            placeholder="请输入质量"
          ></el-input>
          <div v-else class="form-text">{{ form.quality }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input
            v-if="isForm"
            v-model="form.remark"
            style="width: 100%"
            type="textarea"
            :maxlength="1000"
            show-word-limit
            placeholder="请输入备注"
          ></el-input>
          <div v-else class="form-text">{{ form.remark }}</div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { stationLog } from "@/api/productionMgt/changeShifts";
import { ref, reactive, toRefs, getCurrentInstance, watch, onMounted } from "vue";
const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";
const props = defineProps({
  isForm: {
    type: Boolean,
    default: false,
  },
  formData: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["history"]);
const { isForm, formData } = toRefs(props);
const prodWorkStationChangeLog = ref();
const userStore = useUserStore();
const data = reactive({
  form: {
    factory: "",
    factoryName: "",
    workshopCode: "",
    workshopName: "",
    lineCode: "",
    lineName: "",
    sectionCode: "",
    sectionName: "",
    stationCode: "",
    stationName: "",
    workGroup: "",
    workGroupName: "",
  },
  deptTree: {
    factoryList: [],
    workshopList: [],
    lineList: [],
    sectionList: [],
    stationList: [],
  },
  rules: {
    factory: [{ required: true, message: "工厂不能为空", trigger: "blur" }],
    workshopCode: [{ required: true, message: "工段不能为空", trigger: "blur" }],
    lineCode: [{ required: true, message: "产线不能为空", trigger: "blur" }],
    sectionCode: [{ required: true, message: "工艺段不能为空", trigger: "blur" }],
    stationCode: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
  },
});
const { form, deptTree, rules } = toRefs(data);
watch(
  () => formData.value,
  (newValue) => {
    if (newValue) {
      form.value = newValue;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

async function factoryChange() {
  const params = {
    factory: form.value.factory,
    prodDate: form.value.prodDate,
  };
  await stationLog(params).then((res) => {
    deptTree.value.workshopList = res.data.workshopList;
    if (res.data.workshopList.length) {
      form.value.workshopCode = res.data.workshopList[0].workshopCode;
      workshopChange();
    }
    deptTree.value.lineList = [];
    deptTree.value.sectionList = [];
    deptTree.value.stationList = [];
  });
}
async function workshopChange() {
  const params = {
    factory: form.value.factory,
    workshopCode: form.value.workshopCode,
    prodDate: form.value.prodDate,
  };
  await stationLog(params).then((res) => {
    deptTree.value.lineList = res.data.lineList;
    if (res.data.lineList.length) {
      form.value.lineCode = res.data.lineList[0].lineCode;
      lineChange();
    }
    deptTree.value.sectionList = [];
    deptTree.value.stationList = [];
  });
}
async function lineChange() {
  const params = {
    factory: form.value.factory,
    workshopCode: form.value.workshopCode,
    productLine: form.value.lineCode,
    prodDate: form.value.prodDate,
  };
  await stationLog(params).then((res) => {
    deptTree.value.sectionList = res.data.sectionList;
    if (res.data.sectionList.length) {
      form.value.sectionCode = res.data.sectionList[0].sectionCode;
      sectionChange();
    }
    deptTree.value.stationList = [];
  });
}
async function sectionChange() {
  const params = {
    factory: form.value.factory,
    workshopCode: form.value.workshopCode,
    productLine: form.value.lineCode,
    sectionCode: form.value.sectionCode,
    prodDate: form.value.prodDate,
  };
  await stationLog(params).then((res) => {
    deptTree.value.stationList = res.data.stationList;
    if (res.data.stationList.length) {
      form.value.stationCode = res.data.stationList[0].stationCode;

      stationChange();
    }
    form.value.classesName = res.data.classesName;
    form.value.classesCode = res.data.classesCode;
  });
}
async function stationChange(val) {
  deptTree.value.stationList.map((el) => {
    if (el.stationCode === val) {
      form.value.stationName = el.stationName;
    }
  });
  const params = {
    factory: form.value.factory,
    workshopCode: form.value.workshopCode,
    productLine: form.value.lineCode,
    sectionCode: form.value.sectionCode,
    stationCode: form.value.stationCode,
    prodDate: form.value.prodDate,
  };
  await stationLog(params).then((res) => {
    form.value.classesName = res.data.classesName;
    form.value.classesCode = res.data.classesCode;
    form.value.workGroupName = res.data.workGroupName;
    form.value.workGroup = res.data.workGroup;
    form.value.workTime = res.data.prodDate;
    form.value.classesTime = res.data.startProdTime + "-" + res.data.endProdTime;
    if (res.data.prodWorkStationChangeLog) {
      form.value.technologyAdjust = res.data.prodWorkStationChangeLog.technologyAdjust;
      form.value.id = res.data.prodWorkStationChangeLog.id;
      form.value.filledByName = res.data.prodWorkStationChangeLog.filledByName;
      form.value.equipmentStatus = res.data.prodWorkStationChangeLog.equipmentStatus;
      form.value.hygieneClean = res.data.prodWorkStationChangeLog.hygieneClean;
      form.value.secure = res.data.prodWorkStationChangeLog.secure;
      form.value.quality = res.data.prodWorkStationChangeLog.quality;
      form.value.remark = res.data.prodWorkStationChangeLog.remark;
      prodWorkStationChangeLog.value = res.data.prodWorkStationChangeLog;
    }
  });
}
function openHistory() {
  emit("history");
}
async function getDeptInfo() {
  // factory,workshopCode,productLine,sectionCode,stationCode,prodDate
  const res = await stationLog({});
  deptTree.value.factoryList = res.data.factoryList;
  if (res.data.factoryList.length) {
    form.value.factory = res.data.factoryList[0].factoryCode;
    await factoryChange();
  }
}

/** 表单重置 */
function reset() {
  form.value = {
    factory: "",
    factoryName: "",
    workshopCode: "",
    workshopName: "",
    lineCode: "",
    lineName: "",
    sectionCode: "",
    sectionName: "",
    stationCode: "",
    stationName: "",
    workGroup: "",
    workGroupName: "",
    filledByName: "",
    technologyAdjust: "",
    equipmentStatus: "",
    hygieneClean: "",
    secure: "",
    quality: "",
    remark: "",
  };
  proxy.resetForm("queryRef");
}

function setProdDateFun() {
  form.value.prodDate = proxy.parseTime(new Date(), "{y}-{m}-{d}");
}

onMounted(() => {
  if (isForm.value) {
    form.value.prodDate = proxy.parseTime(new Date(), "{y}-{m}-{d}");
  }
});
defineExpose({
  form,
  prodWorkStationChangeLog,
  reset,
  getDeptInfo,
  setProdDateFun,
});
</script>

<style lang="scss" scoped>
.mes-title {
  font-weight: bold;
}

.form-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form--inline :deep(.el-form-item) {
  width: 100%;
}

.log-search :deep(.el-form-item__content) {
  width: 120px;
}
</style>
